<template>
  <div class="common-layout">
    <el-container>
      <!--      左侧菜单-->
      <el-aside class="el-aside" :class="{ collapsed: isCollapse }">
        <el-menu
          background-color="#00152b"
          text-color="#fff"
          class="el-menu"
          :collapse="isCollapse"
        >
          <div class="logo" style="display: flex">
            <img src="/public/logo.png" alt="" />
            <span class="project-name" v-if="!isCollapse">Mathmall后台系统</span>
          </div>

          <template v-for="route in routes" :key="route.path">
            <!--          一级菜单-->
            <el-menu-item
              v-if="route.children?.length === 1"
              @click="toPage(route.children[0].name)"
            >
              <el-icon><component :is="route.children[0]?.meta.icon"></component></el-icon>
              <template #title>
                <span style="font-size: 1rem">{{ route.children[0]?.meta.title }}</span>
              </template>
            </el-menu-item>
            <!--            二级菜单-->
            <el-sub-menu v-else-if="route.children?.length > 1" :index="route.path">
              <template #title>
                <el-icon><component :is="route.meta?.icon"></component></el-icon>
                <span style="font-size: 1rem">{{ route.meta?.title }}</span>
              </template>
              <el-menu-item v-for="item in route.children" :key="item" @click="toPage(item.name)">
                <el-icon><component :is="item.meta?.icon"></component></el-icon>
                <template #title>
                  <span style="font-size: 1rem">{{ item.meta?.title }}</span>
                </template>
              </el-menu-item>
            </el-sub-menu>
          </template>
          <!--          数据大屏-->
          <el-menu-item @click="screen">
            <el-icon>
              <Platform />
            </el-icon>
            <span style="font-size: 1rem">数据大屏</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!--右侧头部及主内容区-->
      <el-container>
        <!--头部-->
        <el-header class="el-header">
          <div class="header-left">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :value="false">展开</el-radio-button>
              <el-radio-button :value="true">折叠</el-radio-button>
            </el-radio-group>
            <el-icon style="margin: 0 0.5rem">
              <component :is="$route.meta.icon"></component>
            </el-icon>
            <el-breadcrumb :separator-icon="ArrowRight" class="header-nav">
              <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="setting">
            <el-button :icon="Refresh" circle @click="refresh" />
            <el-button :icon="FullScreen" circle @click="fullScreen" />
            <el-button :icon="Setting" circle />
            <img :src="avatar" alt="" />
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon class="el-icon-right">
                  <ArrowDown />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="exit">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <div class="el-main">
            <router-view />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import {
  ArrowDown,
  ArrowRight,
  FullScreen,
  Platform,
  Refresh,
  Setting,
} from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { routes } from '@/route/routes'
import { useUserStore } from '@/stores/userStore'
// 引入用户仓库
const userStore = useUserStore()
// 定义头像
const avatar = ref<string>('')
// 左侧菜单折叠变量
let isCollapse = ref(false)
onMounted(() => {
  avatar.value = localStorage.getItem('avatar')!
})
// 刷新按钮点击事件
const refresh = () => {
  location.reload()
}
// 全屏按钮点击事件
const fullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
const $router = useRouter()
const $route = useRoute()
// 页面单击事件
const toPage = (name: string) => {
  $router.push({ name: name })
}
// 退出按钮点击事件
const exit = () => {
  userStore.logout().catch((err) => {
    console.log(err)
  })
  $router.push({ name: 'LoginView' })
}
</script>

<style scoped>
.el-aside {
  background-color: #00152b;
  padding: 1rem 0.5rem;
  overflow: hidden;
  color: white;
  width: 16.5rem;
  transition: width 0.5s;

  &.collapsed {
    transition: width 0.5s;
    width: 4.375rem;
  }

  .el-menu {
    border: none;
  }

  img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .logo span {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    height: 3rem;
    line-height: 3rem;
    margin: 0 0.25rem;
  }
}

.el-header {
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  border-bottom: solid 1px #e4e7ed;

  .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .setting {
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    img {
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      margin: 0 0.5rem;
    }
  }
}

.el-main {
  height: calc(100vh - 4rem);
  padding: 0;
}
</style>
